<template>
  <div>
    <!-- header -->
    <div class="hero-header" >
		<div class="header-content" style="margin-left: 50px; display: flex; align-items: center;">
			<span class="header-logo" style="width: 100px; height: 100px;">
					<img style="display: inline-block; width: 100px; height: 100px;" src="/src/pages/index/static/logo.png" alt="">
			</span>
			<span class="hear-text" style="width: 300px; ">
				<div style=" margin-top: 10px;display: inline-block; color: #215eba; font-size: 16px; font-weight: 700; ">
            区块链安全保障技术政务平台
          </div>
          <div class="hearderPitem" style="width: 500px; color: #3172d4; font-size: 28px; font-weight: 800;">
            社会保障助老多功能平台
          </div>
				
			</span>
      <img style="margin-left: 7%; height: 40px; zoom: 2;" src="/src/pages/index/static/flag5.png" alt="">
			<!-- <img style="margin-left: 7%; height: 40px;" src="/src/pages/index/static/flag.png" alt="">
			<img style="margin-left: 5%; height: 40px;" src="/src/pages/index/static/flag2.png" alt=""> -->
			<!-- <div class="header-right" style="float: right;">
				123456
			</div> -->

            <div class="button" @click="router.push('/index/top')" style="background: #fff; border: 1px solid #5771d1; color: #5771d1; position: absolute; right: 20px; top: 28px; z-index: 999; padding: 8px 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s;">
               返回
            </div>
		</div>
	</div>
        <!-- content -->
        <el-row class="login">
      <video
        autoplay
        loop
        class="video-bg"
        :style="videoStyle"
        muted="muted"
        poster=""
        width="100%"
      >
        <source src="../User/static/oldman2.mp4" type="video/mp4" />
      </video>

      <div
        class="login-form"
        style="
          padding: 40px;
          margin-top: 20%;
          border-radius: 2px;
          width: 30%;
          opacity: 0.95;
          background-color: rgba(255, 255, 255, 0.8);
        "
      >
      <h1 class="login-title">助老多功能管理平台</h1>
        <h3 class="login-subtitle">登录界面</h3>

        <el-form label-width="150px" >
          <el-form-item label="地址录入：" label-position="left" >
            <el-input style="width: 300px" v-model="address" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="用户名：" label-position="left">
            <el-input style="width: 300px" v-model="name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="签名秘钥：" label-position="left">
            <el-input style="width: 300px" v-model="signSecurity" placeholder="请输入签名秘钥" />
          </el-form-item>
          <el-form-item label="用户类型：" label-position="left">
            <el-select style="width: 300px" v-model="value" placeholder="请选择用户类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="login-buttons">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button
              type="primary"
              @click="register"
              style="margin-left: 1em"
            >注册</el-button>
          </div>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import myAxios from '../../plugins/myAxios.js';
import { useCookies } from 'vue3-cookies';
import { ElNotification } from 'element-plus'

const options = [{
        value: 0,
        label: '管理员'
      }, {
        value: 1,
        label: '参保人'
      }, {
        value: 2,
        label: '工作单位'
      }, {
        value: 3,
        label: '社保局'
      }]
const value = ref('');
const address = ref('');
const name = ref('');
const videoStyle = ref('');
const signSecurity = ref('');
const router = useRouter();
const { cookies } = useCookies();
// 方法
const login = async () => {
  if (address == "") {
    alert("区块链地址不能为空！")
    return;
  }
  let postData = {
    name: name.value,
    type: value.value,
    signSecurity: signSecurity.value,
    userAddress: address.value,
   }
    try {
      await myAxios.post('/user/login', postData).then((response) => {
        console.log(1)
        console.log(response)
        console.log(response.headers["UserType"])
        console.log(2)
        if (response.status != 200){
          ElNotification({
            title: '失败',
            message: `登录失败,`,
            type: 'error',
          })
        }

        if (response.data.code == 200) {
          // cookies.set('senderAddress', address.value)
          localStorage.setItem('senderAddress', address.value)
          localStorage.setItem('type',value.value)
          ElNotification({
            title: '成功',
            message: '登录成功',
            type: 'success',
          })
          if (value.value == 0) {
            router.push('/index/top')
          }
          if (value.value == 1) {
            localStorage.removeItem('sponsorName')
            router.push('/index/top')
          }
          if (value.value == 2) {
            localStorage.setItem('sponsorName',name.value)
            router.push('/index/top')
          }
          if (value.value == 3) {
            localStorage.removeItem('sponsorName')
            router.push('/index/top')
          }
        } else {
          ElNotification({
            title: '失败',
            message: `登录失败,${response.data.msg}`,
            type: 'error',
          })
        }
      })
    } catch (e) {
      // console.log(e)
      ElNotification({
        title: '失败',
        message: `登录失败`,
        type: 'error',
      })
    }

  }

const register = () => {
    router.push('/user/register')
}

const handleWindowResize = () => {
      const windowWidth = document.body.clientWidth
      const windowHeight = document.body.clientHeight
      const windowAspectRatio = windowHeight / windowWidth
      let videoWidth
      let videoHeight
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        this.videoStyle = {
          height: windowWidth * 0.5625 + 'px',
          width: windowWidth + 'px',
        }
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        this.videoStyle = {
          height: windowHeight + 'px',
          width: windowHeight / 0.5625 + 'px',
        }
      }
    }

const onMounted = () => {
    this.handleWindowResize()
    window.addEventListener('resize', this.handleWindowResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleWindowResize)
    })
}
</script>

<style scoped>
  /**按钮 */
  .button:hover {
    background-color: #5771d1;
    color: #fff;
  }

  /* 初始 */
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .login {
    position: relative;
    height: 100%;
    background: #fff url('') no-repeat fixed center center / cover;
  }

  .video-bg {
    z-index: 0;
    position: absolute;
    height: 100vh;
    left: 0;
    right: 0;
  }

  .login-form {
    z-index: 1;
    position: absolute;
    margin-top: 200px;
    left: 70%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
  }

  .login-title {
    text-align: center;
    font-size: 2em;
    margin-bottom: 0.5em;
    color: #3172d4;
  }

  .login-subtitle {
    text-align: center;
    font-size: 1.2em;
    color: #666;
    margin-bottom: 2em;
  }

  .login-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2em;
  }

  .login-buttons .el-button {
    min-width: 100px;
  }

  .signup {
    position: relative;
    left: 12%;
    border: 0px;
  }
</style>